<template>
  <div class="home">
    <Launch class="home__launch"></Launch>
    <!-- 轮播图 -->
    <Banner :list="banners"></Banner>
    <!-- 导航栏 -->
    <Navlist :list="categorys"></Navlist>
    <!-- 商品列表 流式布局 -->
    <Brand :list="BrandVideos"></Brand>
    <!-- 快捷导航 -->
    <Fastnav></Fastnav>
  </div>
</template>

<script setup>
import Launch from "@/components/launch/Launch.vue";
import Banner from "@/common/banner.vue";
import Brand from "@/common/brand.vue";
import Navlist from "@/common/navlist.vue";
import Fastnav from "@/common/fastnav.vue";
import {
  getRecommendatoryCategorys,
  getBanners,
  getBrandVideos,
} from "@/api/mall";
import { onMounted, ref } from "vue";
const banners = ref([]);
const categorys = ref([]);
const BrandVideos = ref([]);
onMounted(() => {
  getRecommendatoryCategorys().then((res) => {
    categorys.value = res.data;
  });
  getBanners().then((res) => {
    banners.value = res.data;
  });
  getBrandVideos().then((res) => {
    BrandVideos.value = res.data[0].list.concat(res.data[1].list);
  });
});
</script>
<style scoped>
.home__launch {
  position: sticky;
  top: 0;
  z-index: 111;
}
</style>
